<template>
    <ul>
        <li v-for="item in list" :key="item.id">
            <div class="content">{{item.id}}: {{item.content}}</div>
            <button class="del" @click="del(item.id)">del</button>
        </li>
    </ul>
</template>

<script>
export default {
  props: ['list'],
  methods: {
    del (id) {
      let index = this.list.findIndex(item => {
        return item.id === id
      })
      this.$emit('confirmDel', index)
    }
  }
}
</script>


<style scoped>
.content {
  float: left;
}
.del {
  width: 10%;
  height: 25px;
  margin-left: 10px;

  border: 1px solid pink;
}
</style>

